<template>
    <div>
        <a-form-model layout="inline" ref="roleSearchRef" :model="roleSearchModel">
            <a-form-model-item label="角色Id" prop="roleId">
                <a-input v-model="roleSearchModel.roleId"></a-input>
            </a-form-model-item>
            <a-form-model-item label="角色代码" prop="roleCode">
                <a-input v-model="roleSearchModel.roleCode"></a-input>
            </a-form-model-item>
            <a-form-model-item label="角色名称" prop="roleName">
                <a-input v-model="roleSearchModel.roleName"></a-input>
            </a-form-model-item>
            <a-form-model-item>
                <a-button type="primary" @click="searchRoleBtn()">查询</a-button>
            </a-form-model-item>
            <a-form-model-item>
                <a-button @click="reSearchRoleBtn()">重置</a-button>
            </a-form-model-item>
        </a-form-model>
        <a-card>
            <vxe-toolbar>
                <template v-slot:buttons>
                    <a-button @click="showAddModal" :size="'small'" style="margin-right: 10px">
                        <a-icon type="plus"/>
                        新增
                    </a-button>
                    <a-button type="danger" :size="'small'">
                        <a-icon type="minus"/>
                        批量删除
                    </a-button>
                </template>
            </vxe-toolbar>
            <vxe-table ref="roleTableRef" border
                       stripe
                       resizable
                       highlight-hover-row
                       :auto-resize="true"
                       @checkbox-all="selectAllEvent"
                       @checkbox-change="selectChangeEvent"
                       :loading="loading"
                       :checkbox-config="{labelField: 'id', highlight: true, range: true}"
                       :data="tableData">
                <vxe-table-column type="seq" width="60"></vxe-table-column>
                <vxe-table-column type="checkbox" field="id" title="角色Id" width="100"></vxe-table-column>
                <vxe-table-column field="name" title="角色代码" sortable></vxe-table-column>
                <vxe-table-column field="note" title="角色名称"></vxe-table-column>
                <vxe-table-column field="addTime" title="添加时间"></vxe-table-column>
                <vxe-table-column field="updateTime" title="修改时间"></vxe-table-column>

                <vxe-table-column title="操作" width="330" show-overflow>
                    <template :size="'small'" type="primary" v-slot="{ row }">
                        <a-button type="primary" :size="'small'"  @click="showEditModal(row)" style="margin-right: 5px">
                            <a-icon type="edit"/>
                            编辑角色
                        </a-button>
                        <a-button :size="'small'" style="margin-right: 5px">
                            <a-icon type="form"/>
                            分配菜单
                        </a-button>
                        <a-button :size="'small'">
                            <a-icon type="block"/>
                            分配按钮
                        </a-button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <vxe-pager
                    background
                    size="small"
                    :loading="loading"
                    :current-page="tablePage.currentPage"
                    :page-size="tablePage.pageSize"
                    :total="tablePage.totalResult"
                    :page-sizes="[10, 20, 100]"
                    :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                    @page-change="handleNextPageChange">
            </vxe-pager>

        </a-card>

<!--   编辑     -->
        <a-modal :maskClosable="false"
                 title="编辑角色"
                 :visible="visibleEdit"
                 :confirm-loading="editLoading"
                 cancelText="取消"
                 okText="确定"
                 @ok="editHandleOk"
                 @cancel="editHandleCancel">
            <a-form-model :model="editFormModel" ref="editFormModelRef" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="角色代码">
                    <a-input  disabled v-model="editFormModel.name"/>
                </a-form-model-item>
                <a-form-model-item label="角色描述" prop="note">
                    <a-input v-model="editFormModel.note"/>
                </a-form-model-item>
            </a-form-model>
        </a-modal>

        <!-- 添加 -->
        <a-modal :maskClosable="false"
                 title="新增角色"
                 :visible="visibleAdd"
                 :confirm-loading="addConfirmLoading"
                 cancelText="取消"
                 okText="确定"
                 @ok="addHandleOk"
                 @cancel="addHandleCancel"
        >
            <a-form-model :model="formAddModel" ref="formAddModelRef"
                          :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">

                <a-form-model-item label="角色代码" prop="name">
                    <a-input v-model="formAddModel.name"/>
                </a-form-model-item>
                <a-form-model-item label="角色描述" prop="note">
                    <a-input v-model="formAddModel.note"/>
                </a-form-model-item>

            </a-form-model>


        </a-modal>
    </div>
</template>

<script>
    import {rolePageReq} from "@/api/backend-req/role";

    export default {
        name: "RoleManage",
        mounted() {
            this.searchRoleBtn();
        },
        methods: {
            showEditModal(row) {
                console.log(row);
                this.editFormModel = JSON.parse(JSON.stringify(row));
                this.visibleEdit = true;
            },

            showAddModal() {
                this.visibleAdd = true;
            },
            addHandleOk(e) {
                this.$refs.formAddModelRef.validate((valid) => {
                    if (valid) {
                        console.log(this.formAddModel);
                        this.addConfirmLoading = true;
                        this.$reqGlobal.post('/lte/role/save', this.formAddModel).then(res => {
                            console.log(res);
                            this.addConfirmLoading = false;
                            this.visibleAdd = false;
                            this.$message.warn(res.data.msg);
                            this.reSearchRoleBtn();
                            this.resetForm('formAddModelRef');
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addHandleCancel(e) {
                console.log('Clicked cancel button');
                this.resetForm('formAddModelRef');
                this.visibleAdd = false;
            },

            editHandleOk(e){
                this.$refs.editFormModelRef.validate((valid)=>{
                    if (valid) {
                        console.log(this.editFormModel);
                        this.editLoading = true;
                        this.$reqGlobal.put('/lte/role/update',this.editFormModel).then(res=>{
                            console.log(res);
                            this.editLoading = false;
                            this.visibleEdit = false;
                            this.$message.warn(res.data.msg);
                            this.reSearchRoleBtn();
                            this.resetForm('editFormModelRef');
                        });
                    }else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            editHandleCancel(e){
                this.resetForm('editFormModelRef');
                this.visibleEdit = false;
            },

            resetForm(formRefName) {
                this.$refs[formRefName].resetFields();
            },
            selectAllEvent({checked, records}) {
                console.log(checked ? '所有勾选事件' : '所有取消事件', records);
                this.selectedRowsData = records;
            },
            selectChangeEvent({checked, records}) {
                console.log(checked ? '勾选事件' : '取消事件', records);
                this.selectedRowsData = records;
            },
            handleNextPageChange({currentPage, pageSize}) {
                this.tablePage.currentPage = currentPage
                this.tablePage.pageSize = pageSize;
                let req = JSON.parse(JSON.stringify(this.roleSearchModel))
                req.pageNo = this.tablePage.currentPage - 1;
                req.pageSize = this.tablePage.pageSize;
                this.execRolePageReq(req);
            },
            searchRoleBtn() {
                this.tablePage.currentPage = 1;
                let req = JSON.parse(JSON.stringify(this.roleSearchModel))
                req.pageNo = this.tablePage.currentPage - 1;
                req.pageSize = this.tablePage.pageSize;
                this.execRolePageReq(req);
            },
            execRolePageReq(req) {
                this.loading = true;
                rolePageReq(req).then(res => {
                    this.loading = false;
                    console.log(res);
                    if (res.data.code === 0) {
                        this.tableData = res.data.data.content;
                        this.tablePage.totalResult = res.data.data.totalElements;
                    } else {
                        this.tableData = [];
                        this.tablePage.totalResult = 0;
                    }
                });
            },


            reSearchRoleBtn() {
                this.$refs.roleSearchRef.resetFields(); //使用前需要在 form-item上加注prop属性
                this.searchRoleBtn();
            }

        },
        data() {
            return {
                //----------edit start---
                visibleEdit: false,
                editLoading: false,
                editFormModel: {
                    note: ''
                },
                //----------edit end---

                labelCol: {span: 4},
                wrapperCol: {span: 14},
                visibleAdd: false,
                rules: {

                    name: [
                        {required: true, message: 'Please input  角色代码', trigger: 'blur'},
                        {min: 3, max: 8, message: 'Length should be 3 to 8', trigger: 'blur'},
                    ],
                    note: [
                        {required: true, message: 'Please input  角色描述', trigger: 'blur'},
                        {min: 3, max: 8, message: 'Length should be 3 to 8', trigger: 'blur'},
                    ],

                },
                addConfirmLoading: false,
                formAddModel: {
                    id: undefined,
                    note: '',
                    name: ''
                },

                selectedRowsData: [],
                loading: false,
                tableData: [],
                tablePage: {
                    currentPage: 1,
                    pageSize: 10,
                    totalResult: 0
                },
                roleSearchModel: {
                    roleId: undefined, //1
                    roleCode: undefined, //admin
                    roleName: undefined //管理员
                }
            }
        }
    }
</script>

<style scoped>

</style>
